import React, {Component} from 'react'

export default class FormComponent extends Component{
    constructor(props){
        super(props)
        this.state = {
            count:0,
            fruit:1
        }
    }
    render(){
        return <div>
            <input type="text" value={this.state.count} onChange={this.handleTextChange} />
            <select value={this.state.fruit} onChange={this.handleSelect}>
                <option value="0">请选择</option>
                <option value="1">橘子</option>
                <option value="2">香蕉</option>
                <option value="3">菠萝</option>
                <option value="4">柚子</option>
            </select>
            <input type="button" value="Increment"/>
        </div>
    }

    handleTextChange = (e)=>{
        var valNew = e.target.value;
        this.setState({count:valNew});
    }

    handleSelect = (e)=>{
        var selected = e.target.value;
        // 设置状态的时候，第二个参数可以是一个回调函数,表示设置完状态之后，调用回调函数
        this.setState({fruit:selected}, function(){
            console.log(this.state.fruit);
        });
    }
}